<div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header">
      <h1>仪表盘</h1>
    </div>
  </div>
</div>
<div class="box box-primary">
  <div class="box-body">
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
          <div class="inner">
            <h3>{{onlinerUsersCount + 1}}</h3>
            <p>在线用户</p>
          </div>
          <div class="icon">
            <i class="fa fa-user-plus"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>{{totalUserCount}}</h3>
            <p>总用户</p>
          </div>
          <div class="icon">
            <i class="fa fa-users"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h3>{{activeUserCount}}</h3>
            <p>活动用户</p>
          </div>
          <div class="icon">
            <i class="fas fa-user-check"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h3>{{inactiveUserCount}}</h3>
            <p>非活动用户</p>

          </div>
          <div class="icon">
            <i class="fa fa-user-times"></i>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="row mb-3">
  <div class="col-md-8 col-sm-12">
    <div class="row">
      <div class="col-sm-12">
        <div class="content-header">
          <h1>最近注册</h1>
        </div>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-sm-12">
        <div class="box box-primary">
          <div class="box-body">
            <div class="table-responsive">
              <div class="table table-container">
                <table mat-table [dataSource]="recentlyRegisteredUsers">
                  <!-- userName Column -->
                  <ng-container matColumnDef="userName">
                    <th mat-header-cell *matHeaderCellDef>
                      邮箱
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
                  </ng-container>

                  <!-- firstName Column -->
                  <ng-container matColumnDef="firstName">
                    <th mat-header-cell *matHeaderCellDef>
                      姓名
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
                  </ng-container>

                  <!-- lastName Column -->
                  <ng-container matColumnDef="lastName">
                    <th mat-header-cell *matHeaderCellDef>
                      名称
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
                  </ng-container>

                  <!-- phoneNumber Column -->
                  <ng-container matColumnDef="phoneNumber">
                    <th mat-header-cell *matHeaderCellDef>
                      电话
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.phoneNumber}} </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-12">
    <div class="row">
      <div class="col-sm-12">
        <div class="content-header">
          <h1>Online Users</h1>
        </div>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-sm-12">
        <div class="box box-primary">
          <div class="box-body">
            <div class="table-container">
              <ng-container *ngIf="onlineUsers && onlineUsers.length>0; else tempNoRecord">
                <ul class="products-list product-list-in-card pl-2 pr-2">
                  <li class="item" *ngFor="let onlineUser of onlineUsers">
                    <div class="product-img">
                      <img [src]="onlineUser.profilePhoto" alt="User Image" class="img-circle elevation-2 img-size-50">
                    </div>
                    <div class="product-info">
                      <a class="product-title">{{onlineUser.firstName}} {{onlineUser.lastName}}</a>
                      <span class="product-description">
                        {{onlineUser.email}}
                      </span>
                    </div>
                  </li>
                </ul>
              </ng-container>
              <ng-template #tempNoRecord>
                <tr>
                  <td>
                    <b>
                      目前除您之外，没有其他用户登录
                    </b>
                  </td>
                </tr>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
